<template>
  <div>
    <div v-if="courseList === null" class="becomeLecturers-div icon" :style="{fontSize: becomeLecturersDiv}">
      <p>您当前尚未开设课程</p>
    </div>
    <div v-if="courseList !== null" v-infinite-scroll="getList"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
     <div class="n-lecturersCourse-height" v-for="course in courseList" v-bind:key="course-1" :style="{marginBottom: initMarginBottom,height: initImgWidth,marginLeft:marginLeft30px}" v-on:click="openCourseDetail(course.id)">
       <div class="lecturersCourse" :style="{width: initImgWidth,marginTop: nLecturersCourseDetailPaddingTop,height: imgLecturersCourseHeight110px,marginBottom: lecturersCoursePaddingBottom}">
          <img :src="course.imgUrl" :style="{width: initImgWidth,height: imgLecturersCourseHeight110px}">
      </div>
      <div class="n-lecturersCourse-detail" :style="{marginLeft: initDetailPaddingLeft,marginTop: nLecturersCourseDetailPaddingTop}">
        <div class="n-lecturersCourse-title" :style="{fontSize:initTitleFontSize}">{{course.name}}</div>
        <div class="n-lecturersCourse-lastTime" :style="{fontSize:initFontSize}">{{course.startTime | formatDate}}</div>
        <div class="n-lecturersCourse-time" :style="{fontSize:initFontSize}">地点:{{course.address}}</div>
      </div>
      <div v-if="(course.isBegin == 0)"  class="isBegin isStartFont-color" :style="{lineHeight: isBeginWidthLineHeight35,marginTop: isBeginMarginTop40,height: isBeginHeight35,width: initIsBeginwidth, marginLeft: initIsBeginMarginleft, fontSize: initIsBeginFontSize}">
        未开始
      </div> 
      <div v-if="(course.isBegin == 1)" class="isBegin isEndFont-color" :style="{lineHeight: isBeginWidthLineHeight35,marginTop: isBeginMarginTop40,height: isBeginHeight35,width: initIsBeginwidth, marginLeft: initIsBeginMarginleft, fontSize: initIsBeginFontSize}">
        已结束
      </div>
        <div class="n-lecturersCourse-number" :style="{width: initNumberWidth,marginRight: initNumberPaddingRight,marginTop: nLecturersCourseNumberPaddingTop35,height: nLecturersCourseNumberPaddingHeight96 }">
          <div class="n-lecturersCourse-isOpen" :style="{fontSize: nLecturersCourseIsOpenFontSize}">报&nbsp;&nbsp;名&nbsp;&nbsp;(人)</div>
          <div class="n-lecturersCourse-num" :style="{fontSize: initNumFontSize,marginTop: nLecturersCourseNumPaddingTop}">{{course.studentNum}}</div>
        </div>
    </div>
  </div> 
  </div>
</template>
<script>
import { fetchListByEmpNo } from '@/api/course'
import { parseTime } from '@/utils/date'
import { pageSize } from '@/utils/page'

export default {
  data () {
    return {
      courseList: null,
      pageNum: 1,
      loading: true,
      pageSize: pageSize,
      imgUrlss: 'http://192.168.31.143:8088/666.png',
      allLoaded: false,
      listQuery: {
        courseWareId: '',
        empNo: '',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
    }
  },
  created () {
    this.getList()
  },
  filters: {
    formatDate (time) {
      if (time === null) {
        return '--'
      }
      var date = new Date(time)
      return parseTime(date, '{y}-{m}-{d} {h}:{i}')
    }
  },
  computed: {
    initMarginBottom () {
      return this.clientWidth * 15 / 750 + 'px'
    },
    initImgWidth () {
      return this.clientWidth * 180 / 750 + 'px'
    },
    marginLeft30px () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    initDetailPaddingLeft () {
      return this.clientWidth * 22 / 750 + 'px'
    },
    initTitleFontSize () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    initFontSize () {
      return this.clientWidth * 22 / 750 + 'px'
    },
    initNumberWidth () {
      return this.clientWidth * 66 / 750 + 'px'
    },
    initNumFontSize () {
      return this.clientWidth * 58 / 750 + 'px'
    },
    initNumberPaddingRight () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    initIsBeginwidth () {
      return this.clientWidth * 77 / 750 + 'px'
    },
    initIsBeginMarginleft () {
      return this.clientWidth * 18 / 750 + 'px'
    },
    initIsBeginFontSize () {
      return this.clientWidth * 18 / 750 + 'px'
    },
    isBeginHeight35 () {
      return this.clientWidth * 35 / 750 + 'px'
    },
    isBeginMarginTop40 () {
      return this.clientWidth * 40 / 750 + 'px'
    },
    isBeginWidthLineHeight35 () {
      return this.clientWidth * 35 / 750 + 'px'
    },
    nLecturersCourseNumPaddingTop () {
      return this.clientWidth * 15 / 750 + 'px'
    },
    nLecturersCourseIsOpenFontSize () {
      return this.clientWidth * 14 / 750 + 'px'
    },
    nLecturersCourseNumberPaddingTop35 () {
      return this.clientWidth * 35 / 750 + 'px'
    },
    nLecturersCourseNumberPaddingHeight96 () {
      return this.clientWidth * 96 / 750 + 'px'
    },
    nLecturersCourseDetailPaddingTop () {
      return this.clientWidth * 35 / 750 + 'px'
    },
    imgLecturersCourseHeight110px () {
      return this.clientWidth * 110 / 750 + 'px'
    },
    lecturersCoursePaddingBottom () {
      return this.clientWidth * 12 / 750 + 'px'
    }
  },
  methods: {
    getList () {
      this.loading = true
      this.listQuery.pageNum = this.pageNum
      this.listQuery.courseWareId = this.$route.query.id
      this.listQuery.pageSize = this.pageSize
      let oldCourseList = this.courseList === null ? [] : this.courseList
      fetchListByEmpNo(this.listQuery).then(response => {
        if (response.data.content !== null && response.data.content.length > 0) {
          for (var i in response.data.content) {
            oldCourseList.push(response.data.content[i])
          }
          this.courseList = oldCourseList
          this.loading = false
          this.pageNum = this.pageNum + 1
        }
      })
    },
    openCourseDetail (id) {
      var router = this.$router
      console.log(id)
      router.push({path: '/lecturerCourseDetail', query: { id: id }})
    }
  }
}
</script>

<style>
.n-lecturersCourse-height{
      background: #ffffff;
}
.lecturersCourse{
      float: left;
}
.n-lecturersCourse-detail {  
    float: left;
    color: #5b6175;
}
.n-lecturersCourse-title {
    font-weight: bold;
    color:#5B6175;
}
.n-lecturersCourse-lastTime {
    color:#5B6175;
}
.n-lecturersCourse-number{
      float: right;
}
.n-lecturersCourse-isOpen{
      color:#5b6175;
}
.n-lecturersCourse-num{
      color:#00B685;
      font-family: 微软雅黑;
      font-weight: bold;
}
.isBegin{
  float: left;
  border-radius: 4px;
  text-align: center;
}

</style>
